home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Image Galleries / image-thumbnail-viewer2.izs < prev    next >
Text File  |  2005-09-01  |  6KB  |  172 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Image Thumbnail Viewer II
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>Similar in function to Image Thumbnail Viewer, this script loads and displays a larger image when a thumbnail is clicked on. Great for letting visitors preview from many images then select the image of his choice to view on the same page. Features include:
  9.  
  10. Configure larger image to be shown via onClick or onMouseover of thumbnail. 
  11. Images loaded can vary in dimensions, and can each be independently linked. 
  12. Specify whether images should be preloaded. Set to "no" to save on download time and bandwidth. 
  13. Define image border and optional link target. 
  14. Define multiple regions for different images to be displayed in. 
  15. In IE5.5+, an optional fade-wipe effect is applied during each image change. 
  16. Script works in all modern DHTML browsers- IE5+, NS6+, and Opera 7+. 
  17. Yes, deceptively loaded!
  18.  
  19. <!/DESCRIPTION> 
  20.  
  21. <!CATEGORY>image galleries<!/CATEGORY>
  22.  
  23. <!SCRIPT>
  24. <!-- START OF SCRIPT -->
  25. <!-- Step 1: Add the following script to the <head> section of your page: -->
  26. <script type="text/javascript">
  27.  
  28. /***********************************************
  29. * Image Thumbnail Viewer II script- ⌐ Dynamic Drive DHTML code library (www.dynamicdrive.com)
  30. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  31. * This notice must stay intact for legal use
  32. ***********************************************/
  33.  
  34. //Specify image paths and optional link (set link to "" for no link):
  35. var dynimages=new Array()
  36. dynimages[0]=["photo1.jpg", "http://www.cnn.com"]
  37. dynimages[1]=["photo2.jpg", "http://www.yahoo.com"]
  38. dynimages[2]=["photo3.jpg", "http://www.google.com"]
  39.  
  40. //Preload images ("yes" or "no"):
  41. var preloadimg="no"
  42.  
  43. //Set optional link target to be added to all images with a link:
  44. var optlinktarget=""
  45.  
  46. //Set image border width
  47. var imgborderwidth=0
  48.  
  49. //Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
  50. var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
  51.  
  52. ///////No need to edit beyond here/////
  53.  
  54. if (preloadimg=="yes"){
  55. for (x=0; x<dynimages.length; x++){
  56. var myimage=new Image()
  57. myimage.src=dynimages[x][0]
  58. }
  59. }
  60.  
  61. function returnimgcode(theimg){
  62. var imghtml=""
  63. if (theimg[1]!="")
  64. imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
  65. imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
  66. if (theimg[1]!="")
  67. imghtml+='</a>'
  68. return imghtml
  69. }
  70.  
  71. function modifyimage(loadarea, imgindex){
  72. if (document.getElementById){
  73. var imgobj=document.getElementById(loadarea)
  74. if (imgobj.filters && window.createPopup){
  75. imgobj.style.filter=filterstring
  76. imgobj.filters[0].Apply()
  77. }
  78. imgobj.innerHTML=returnimgcode(dynimages[imgindex])
  79. if (imgobj.filters && window.createPopup)
  80. imgobj.filters[0].Play()
  81. return false
  82. }
  83. }
  84.  
  85. </script>
  86. <!-- Step 2: Add the following example code to the <BODY> section of your page. It illustrates how to set up thumbnails to display their larger counterparts: -->
  87. <a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br>
  88. <a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
  89. <a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a><p>
  90.  
  91. <div id="dynloadarea" style="width:80px;height:225px"></div>
  92.  
  93. <div id="dynloadarea2" style="width:80px;height:200px"></div>
  94. <!-- END OF SCRIPT -->
  95. <!/SCRIPT>
  96.  
  97. <!PREVIEW>
  98. <!-- START OF SCRIPT -->
  99.  
  100. <!-- Step 1: Add the following script to the <head> section of your page: -->
  101. <script type="text/javascript">
  102.  
  103. /***********************************************
  104. * Image Thumbnail Viewer II script- ⌐ Dynamic Drive DHTML code library (www.dynamicdrive.com)
  105. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  106. * This notice must stay intact for legal use
  107. ***********************************************/
  108.  
  109. //Specify image paths and optional link (set link to "" for no link):
  110. var dynimages=new Array()
  111. dynimages[0]=["photo1.jpg", "http://www.cnn.com"]
  112. dynimages[1]=["photo2.jpg", "http://www.yahoo.com"]
  113. dynimages[2]=["photo3.jpg", "http://www.google.com"]
  114.  
  115. //Preload images ("yes" or "no"):
  116. var preloadimg="no"
  117.  
  118. //Set optional link target to be added to all images with a link:
  119. var optlinktarget=""
  120.  
  121. //Set image border width
  122. var imgborderwidth=0
  123.  
  124. //Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
  125. var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
  126.  
  127. ///////No need to edit beyond here/////
  128.  
  129. if (preloadimg=="yes"){
  130. for (x=0; x<dynimages.length; x++){
  131. var myimage=new Image()
  132. myimage.src=dynimages[x][0]
  133. }
  134. }
  135.  
  136. function returnimgcode(theimg){
  137. var imghtml=""
  138. if (theimg[1]!="")
  139. imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
  140. imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
  141. if (theimg[1]!="")
  142. imghtml+='</a>'
  143. return imghtml
  144. }
  145.  
  146. function modifyimage(loadarea, imgindex){
  147. if (document.getElementById){
  148. var imgobj=document.getElementById(loadarea)
  149. if (imgobj.filters && window.createPopup){
  150. imgobj.style.filter=filterstring
  151. imgobj.filters[0].Apply()
  152. }
  153. imgobj.innerHTML=returnimgcode(dynimages[imgindex])
  154. if (imgobj.filters && window.createPopup)
  155. imgobj.filters[0].Play()
  156. return false
  157. }
  158. }
  159.  
  160. </script>
  161. <!-- Step 2: Add the following example code to the <BODY> section of your page. It illustrates how to set up thumbnails to display their larger counterparts: -->
  162. <a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br>
  163. <a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
  164. <a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a><p>
  165.  
  166. <div id="dynloadarea" style="width:80px;height:225px"></div>
  167.  
  168. <div id="dynloadarea2" style="width:80px;height:200px"></div>
  169. <!-- END OF SCRIPT -->
  170. <!/PREVIEW>
  171.  
  172. <!RELATED>NONE<!/RELATED>